<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 id="hh">{{msg}}</h1>
    </div>
</body>
</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'中华小当家'
        },
        // 初始化之前会执行四个钩子函数,组件加载的时候，这四个钩子只会执行一次
        beforeCreate () {
            // 组件的初始化，获取不到data或者methods的
            //    一般业务中用的较少，一般用于初始化一些参数（几乎不用）
            console.group('beforeCreate');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        created () {
            // 数据和methods都已经初始化完成，这里可以使用了，虚拟dom没有被创建出来
            //    可以对data进行修改了
            //    可以发送网络请求
            console.group('created');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        beforeMount () {
            // 虚拟dom创建出来了，但是尚未对数据进行解析和挂载，没有真正的加载到html结构中
            //    可以发送网络请求
            console.group('beforeMount');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        mounted () {
            // 用的最多的钩子函数，因为这个钩子函数一切都准备就绪
            //    虚拟dom已经对数据解析完成，并且真正的挂载到html结构中
            //    如果要做dom操作，在这里是最合适的
            //    可以发送网络请求
            console.group('mounted');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        // 更新的时候  （用的也不多，了解）
        beforeUpdate () {
            console.group('beforeUpdate');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        updated () {
            console.group('updated');
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.querySelector('#hh').innerText);
            console.groupEnd();
        },
        // 组件销毁的时候
        //   一般使用的时候用一个就行
        // 应用：我们可以移除持续性事件监听，比如video监听进度条更新的事件，还有卸载定时器
        beforeDestroy () {
            console.log('即将销毁');
        },
        destroyed () {
            console.log('啦啦啦啦');
        },
    })
</script>